<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@taglib uri="http://displaytag.sf.net" prefix="display" %>

<script language="JavaScript" type="text/javascript">                                                                                 
function cambia(nombre)
{
	nombre.src = "images/plantilla"+document.getElementById("usrPlantilla").value+".png";
} 
</script>
<a href="<%=request.getContextPath()%>/inicio.do">Inicio</a> --&gt; 
<a href="<%=request.getContextPath()%>/curriculum.do">Curriculum</a> --&gt; 
<a href="<%=request.getContextPath()%>/plantillas.do">Plantillas</a>
<br><br>
<div id="accordion">
	<!-- FORMULARIO REGISTRO -->
	<div><a href="#">Plantillas</a></div>
	<div align="justify">
		<br>Observa la vista previa de cada una de las plantillas disponibles cambiando la selecci&oacute;n en la lista desplegable 
		y cuando hayas elegido alguna guarda el cambio para que se aplique el dise&ntilde;o al momento de generar el documento.<br><br><br>
		<html:form action="usuario.do"  method="post" styleClass="hform" styleId="formRegistro">
						<html:select styleId="usrPlantilla" styleClass="ui-widget-header" property="usrPlantilla" value="${usuarioVO.usrPlantilla}" onchange="cambia(imagen)" >
							<html:option value="1">Plantilla T&iacute;tulo Azul</html:option>
	        				<html:option value="2">Plantilla Franja Verde</html:option>
						</html:select>
					&nbsp;&nbsp;&nbsp;&nbsp;
				<button name="accion" value="cambioPlantilla" class="ui-state-active ui-corner-all">
					<span style="vertical-align:middle;"><img src="images/guardar.png" height="24" ></span>
					<span style="vertical-align:middle; padding: 0 0 13px;">&nbsp;Guardar&nbsp;</span>					
				</button>
				<br><br>
				<center>
				<html:img styleId="imagen" src="images/plantilla${usuarioVO.usrPlantilla}.png" height="40%" width="40%"/>
				</center>
		</html:form>
	</div>				
</div>